import React, { useMemo, useState } from 'react';
import { Outlet, useLocation } from 'react-router-dom';
// import { HappyProvider } from '@ant-design/happy-work-theme';
// import { setToken } from './redux/modules/tokenReducer';
import { Layout, theme, ConfigProvider, Button, App } from 'antd';
import zhCN from 'antd/es/locale/zh_CN';
import Header from './components/Header';
import SideMenu from './components/SideMenu';
import KeepAlive from 'keepalive-for-react';
const { Sider, Content } = Layout;

//全局消息提示配置1
// message.config({
//   duration: 2,
//   maxCount: 1
// });
const MyApp: React.FC = () => {
  const [collapsed, setCollapsed] = useState(false);
  const { colorBgContainer, borderRadiusLG } = theme.useToken().token;
  const { message } = App.useApp();
  const location = useLocation();

  /**
   * 用于区分不同页面以进行缓存
   */
  const cacheKey = useMemo(() => {
    return location.pathname + location.search;
  }, [location]);

  return (
    <ConfigProvider
      locale={zhCN}
      theme={{
        token: {
          colorPrimary: '#a062d4', // 浅紫
          borderRadius: 12,
        },
        components: {
          Button: {
            colorPrimary: '#7438a5'  // 深紫
          },
        },
      }}
    >
      <App message={{ maxCount: 1 }}>
        <Layout className='app-container'>
          <Sider width={300} trigger={null} collapsible collapsed={collapsed}>
            <SideMenu collapsed={collapsed} />
          </Sider>
          <Layout>
            <Header collapsed={collapsed} setCollapsed={setCollapsed} />
            <Content className='main-container' style={{ background: colorBgContainer, borderRadius: borderRadiusLG }}>
              <KeepAlive activeName={cacheKey} max={10} strategy={'LRU'}>
                <Outlet />
              </KeepAlive>
              {/* <Button onClick={() => dispatch(setToken('al;sjdl1k213;lk'))}>设置token</Button> */}
            </Content>
          </Layout>
        </Layout>
      </App>
    </ConfigProvider>
  );
};

export default MyApp;
